<template>
  <el-dialog :title="formData.id ? '编辑经纪人':'新增经纪人'" :visible="ShowDialog">
    <el-form ref="form" :model="formData" label-width="80px" :rules="brokersRules">
      <el-form-item label="名称" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="formData.email" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="formData.phone" />
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="formData.address" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="formData.desc" type="textarea" />
      </el-form-item>
      <el-form-item label="封面" label-width="50px" label-position="left">
        <UploadImage ref="uploadImg" />
        <!-- 放置上传图片 -->
        <el-input v-model="formData.image" />
      </el-form-item></el-form>
    <template #footer>
      <!-- 底部 -->
      <el-row type="flex" justify="end">
        <el-button size="small" type="primary" @click="confirmFn">确定</el-button>
        <el-button size="small" @click="closeFn">取消</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { addBrokers, getBrokersData, editBrokers } from '@/api/brokers'

export default {

  props: {
    ShowDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      brokersRules: {
        name: [{ required: true, trigger: 'blur', message: '请输入名称' }],
        desc: [{ required: true, trigger: 'blur', message: '请输入描述' }]
      },
      formData: {
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: '',
        image: ''
      }
    }
  },
  methods: {
    // 回显
    async getBrokersData(id) {
      const arr = await getBrokersData(id)
      this.formData = arr.data
      if (this.formData.image) {
        this.$refs.uploadImg.fileList.push({
          url: this.formData.image
        })
       }
    },
    // 确认新增
    async confirmFn() {
      // 校验
      await this.$refs.form.validate()
      // 绑定上传图片拿到url，赋值给image里
      const uploadImage = this.$refs.uploadImg
      this.formData.image = uploadImage.fileList[0].url

      if (this.formData.id) {
        // 编辑接口
        await editBrokers(this.formData)
      } else {
      // 新增接口
        await addBrokers(this.formData)
      // this.$message({
      //     message: '添加成功',
      //     type: 'success'
      //   });
      }

      // 关闭弹窗
      this.closeFn()
      // 刷新页面
      this.$emit('confirmEventFn')
    },
    // 取消
    closeFn() {
      this.$emit('update:showDialog', false)
      // 清空表单
      this.formData = {
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: '',
        image: ''
      }
      this.$refs.uploadImg.fileList=[]
      // 重置表单
      this.$refs.form.resetFields()
      
    }

  }
}
</script>

<style lang="scss">
// 弹窗样式
.el-dialog__header {
    background: #ffffff;
     .el-dialog__title {
    color: rgb(20, 20, 20);
}
}

</style>
